<template>
  <div class="ground_search" v-loading="loading">
    <!--  -->
    <div class="ground_top">
      <!-- 头部 -->
      <div class="header_box">
        <span @click="goHome">
          <img
            class="imgOne"
            src="~@/assets/duZhongTai/goHomeTwo.png"
            alt=""
            srcset=""
          />
        </span>
        <span class="title">搜索</span>
        <span>
          <img
            class="imgTwo"
            src="~@/assets/duZhongTai/moreTwo.png"
            alt=""
            srcset=""
          />
          <!-- <van-popover
          v-model="showPopover"
          trigger="click"
          @select="onSelect"
          placement="bottom-end"
        >
          <template slot="reference">
            <img
              class="imgTwo"
              src="~@/assets/duZhongTai/more.png"
              alt=""
              srcset=""
            />
          </template>
          <div
            v-for="(item, index) in actions"
            :key="index"
            class="popover_box"
          >
            <span :class="item.icon" @click="onSelect(item)">
              <span style="padding-left: 10px">{{ item.text }}</span>
            </span>
          </div>
        </van-popover> -->
        </span>
      </div>
      <!-- 搜索框 -->
      <div>
        <van-search
          v-model="searchValue"
          shape="round"
          clearable
          show-action
          background="rgb(0,141,255)"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template slot="action">
            <div @click="onSearch" style="background: rgb(0, 141, 255)">
              搜索
            </div>
          </template>
        </van-search>
      </div>
    </div>
    <!-- 搜索内容 -->
    <div class="ground_bottom" v-if="duList.length > 0">
      <!-- 嘟消息 -->
      <div class="du_content" @scroll="scrollBottom">
        <div
          v-for="(item, index) of duList"
          :key="index"
          class="du_box"
          @click.stop="handleDetails(item)"
        >
          <!-- <img
            class="du_img"
            src="~@/assets/duZhongTai/duLogo.png"
            alt=""
            srcset=""
          /> -->
          <span class="left_img">
            <img
              v-if="item.sceneType == '嘟执行'"
              src="http://134.64.251.212:8084/cpcp/imgUrl/zhixingNew.png"
              alt=""
              srcset=""
            />
            <img
              v-if="item.sceneType == '嘟预警'"
              src="http://134.64.251.212:8084/cpcp/imgUrl/yujingNew.png"
              alt=""
              srcset=""
            />
            <img
              v-if="item.sceneType == '消息通知类'"
              src="http://134.64.251.212:8084/cpcp/imgUrl/tongzhiNew.png"
              alt=""
              srcset=""
            />
            <img
              v-if="item.sceneType == '知识通知类'"
              src="http://134.64.251.212:8084/cpcp/imgUrl/xiaoxiNew.png"
              alt=""
              srcset=""
            />
            <img
              v-if="
                item.sceneType != '嘟执行' &&
                item.sceneType != '嘟预警' &&
                item.sceneType != '消息通知类' &&
                item.sceneType != '知识通知类'
              "
              src="http://134.64.251.212:8084/cpcp/imgUrl/otherTwoNew.png"
              alt=""
              srcset=""
            />
          </span>
          <div class="du_c">
            <div class="du_c_i">
              <span>
                {{
                  item.title.length >= 10
                    ? item.title.substring(0, 10) + "..."
                    : item.title
                }}
              </span>
              <span>
                <!-- <img :src="item.imgUrl" alt="" srcset="" /> -->
                <img
                  v-if="item.sceneType == '嘟执行'"
                  src="../../../../assets/duZhongTai/zhixing.png"
                  alt=""
                  srcset=""
                />
                <img
                  v-if="item.sceneType == '嘟预警'"
                  src="../../../../assets/duZhongTai/yujing.png"
                  alt=""
                  srcset=""
                />
                <img
                  v-if="
                    item.sceneType == '消息通知类' ||
                    item.sceneType == '嘟学习' ||
                    item.sceneType == '嘟运营'
                  "
                  src="../../../../assets/duZhongTai/xiaoxi.png"
                  alt=""
                  srcset=""
                />
              </span>
            </div>
            <div class="du_c_t">
              <!-- {{
                item.content === "" || item.content === null
                  ? "暂无内容"
                  : item.content
              }} -->
              <div
                class="get_content"
                v-html="getContent(item.content)"
                v-if="item.content"
              ></div>
            </div>
            <!-- <div style="margin-top: 5px;">发送时间：{{item.createTime}}</div> -->
          </div>
        </div>
        <!-- <div class="du_content">
          <van-empty description="暂无数据..." />
        </div> -->
        <div v-if="noMore" class="no_more">没有更多了...</div>
      </div>
    </div>
    <!-- <div class="du_content" v-if="!guanjianShow">
      <van-empty description="暂无数据..." />
    </div> -->
    <div class="noNumList" v-if="guanjianShow">
      <img src="~@/assets/duZhongTai/logo.png" alt="" srcset="" />
      <div class="content">输入关键词搜索...</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";

Vue.use(Search);
import { Toast } from "vant";
export default {
  data() {
    return {
      searchValue: "",
      pageNum: 1,
      pageSize: 20,
      total: 0,
      loading: true,
      // 内容
      duList: [],
      noMore: false,
      flag: "1",
      guanjianShow: true,
      staffAccount: "",
    };
  },
  watch: {},
  activated() {
    console.log("--2222-", this.$route.params.staffAccount);
    this.staffAccount = this.$route.params.staffAccount || this.staffAccount;
    this.searchValue = "";
    this.guanjianShow = true;
    this.flag = "1";
    this.pageNum = 1;
    this.duList = [];
    this.getDuData();
  },
  mounted() {
    console.log("---", this.$route);
  },
  created() {
    this.getDuData();
  },
  methods: {
    //返回
    goHome() {
      this.$router.back(-1);
    },
    //搜索
    onSearch() {
      console.log("searchValue=", this.searchValue);
      this.guanjianShow = false;
      this.noMore = false;
      this.pageNum = 1;
      this.flag = "0";
      this.duList = [];
      this.getDuData();
    },
    //获取列表数据
    getDuData() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getList"),
        method: "get",
        params: this.$http.adornParams({
          title: this.searchValue, //标题搜索
          flag: this.flag, //首页进来传0，搜索页传1
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          staffAccount: this.staffAccount, //工号
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // this.duList = [];
          console.log("data==", data);
          this.loading = false;
          if (data.data.records.length) {
            this.duList = [...this.duList, ...data.data.records]; // 合并数据
            this.staffAccount = data.data.records[0].staffAccount;
          } else {
            this.noMore = true; // 用一个变量来记录没有更多数据了
          }
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    /** 判断滚动到底部 */
    scrollBottom(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement;
      // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("触底了，加载数据");
        if (this.noMore) return;
        this.pageNum++;
        this.getDuData();
      } else {
        // console.log("到底了");
      }
    },
    getContent(item) {
      let str = "";
      // str += item.replace("<p>", "<p style='margin:0px;'>");
      str += item.replace(
        "<p>",
        "<p style='margin:0px;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;}'>"
      );
      return str;
    },
    //点击进入详情页
    handleDetails(item) {
      console.log("点击进入详情页item==", item);
      this.$router.push({
        name: "groundDetailsHtml",
        params: {
          item: item,
        },
      });
    },
  },
};
</script>

<style scoped>
.ground_top {
  width: 100%;
  height: 100px;
  background-color: rgb(0, 141, 255);
}
.header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  /* border: 1px solid red; */
  padding: 0 10px;
}
.header_box .title {
  font-size: 1.25rem;
  color: #fff;
}
.header_box .imgOne {
  /* width: 25px; */
  /* height: 1.5625rem; */
  height: 1.0625rem;
}
.header_box .imgTwo {
  /* width: 40px; */
  width: 1.5625rem;
  /* height: 25px; */
}
.ground_bottom {
  width: 100%;
  background: rgb(247, 247, 247);
  /* border: 1px solid red; */
  /* height: calc(100vh - 110px); */
}
.du_content {
  /* width: 99%; */
  height: calc(100vh - 100px);
  /* border: 1px solid red; */
  overflow: auto;
  background: rgb(247, 247, 247);
  /* margin-top: 20px; */
  padding-bottom: 1.25rem;
  padding-top: 1px;
  /* position: relative; */
}
.du_box {
  /* position: absolute;
    top: 0px;
    left: 0px; */
  display: flex;
  width: 96%;
  margin-left: 2%;
  align-items: center;
  /* border: 1px solid red; */
  background: #fff;
  /* margin-top: 1.25rem; */
  margin-top: 0.625rem;
  border-radius: 0.625rem;
  height: 5.15rem;
  /* line-height: 100px; */
  padding: 0 5px;
}
.du_box .du_img {
  width: 4.375rem;
  height: 4.375rem;
  margin-left: 10px;
}
.du_box .du_c {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  width: 70%;
}
.du_box .du_c .du_c_i {
  margin-top: -10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.du_box .du_c .du_c_i span:first-child {
  font-weight: bolder;
  /* font-size: 1.125rem; */
  font-size: 0.875rem;
}
.du_box .du_c .du_c_t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  max-height: 1rem;
}
.du_box .du_c .du_c_t .get_content {
  overflow: hidden;
  text-overflow: ellipsis;
  /* display: -webkit-box; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1 !important;
}
.du_box .du_c img {
  width: 1.575rem;
  vertical-align: sub;
}
.noNumList {
  padding-top: 50%;
  text-align: center;
  /* width: 100%;
  height: 100%;
  background: url("../../../../assets/duZhongTai/logo.png") no-repeat;
  background-size: contain;
  background-position: 100% 40%; */
}
.noNumList img {
  width: 25%;
}
.noNumList .content {
  margin-top: 1.25rem;
  font-size: 18px;
  color: #b9b9b9;
}
.no_more {
  text-align: center;
  margin-top: 1.5625rem;
}
.left_img img {
  width: 2.75rem;
}
</style>
<style>
.van-search__action:active {
  background: rgb(0, 141, 255);
}
</style>